<!DOCTYPE html>
<html>
<head><title>TUIO Client plugin test</title>
<style type="text/css">
body { margin: 0px; overflow: hidden; }
#log {position: absolute; right: 0; top: 0; width: 300px;}
#rect {width: 320px; height: 240px; background: red;}
#rect2 {float: right; width: 320px; height: 240px; background: red;}
</style>
</head>
<body>

<pre id="log"></pre>

<div id="rect2"></div>
<div id="rect"></div>

<object id="tuio" type="application/x-tuio">Plugin FAILED to load</object>

</body>
<script type="text/javascript" src="magictouch.js"></script>
<script type="text/javascript">
var rect = document.getElementById('rect');
rect.addEventListener('touchstart', function(event) {
  console.log('touchstart on r1');
  console.log(event.targetTouches);
});

var rect2 = document.getElementById('rect2');
rect2.addEventListener('touchstart', function(event) {
  console.log('touchstart on r2');
});
</script>
</html>
